<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,user-scalable=0"/>
    <meta charset="UTF-8">
    <title>BD健身</title>
    <script src="__api__/js/fontSize.js"></script>
    <link rel="stylesheet" href="__api__/css/bootstrap.min.css">
    <link rel="stylesheet" href="__api__/css/reset.css">
    <link rel="stylesheet" href="__api__/css/my_main.css">
    <script src="__assets__/js/jquery.min.js"></script>
    <script src="__assets__/layui.js"></script>
</head>
<style>
.reg_form .form-group .btnCode{
    position: absolute;
    right: 0.55rem;
    top: 0.26rem;
    border: 1px solid #e0e0e0;
    padding: 0.03rem 0.09rem;
    border-radius: 8px;
	 color: #999999;
	border: 1px solid #e0e0e0;
    background: none;
}

</style>
<body>
<div class="register">

    <div class="regTitle">
        <h2>注册账号</h2>
    </div>
    <div class="reg_form">

            <form method="post" class="form-horizontal" onsubmit="return false">
                <div class="form-group">
                    <div class="icon">
                        <img src="__api__/images/user_icon.png">
                    </div>
                    <input type="tel" name="telphone" class="form-control" placeholder="请输入手机号" id="mobile">
                </div>
                <div class="form-group">
                    <div class="icon">
                        <img src="__api__/images/pwd_icon.png">
                    </div>
                    <input type="password" name="password" class="form-control" placeholder="请输入6~16位密码">
                </div>
                <div class="form-group">
                    <div class="icon">
                        <img src="__api__/images/code_icon.png">
                    </div>
                    <input type="text" name="code" class="form-control" placeholder="验证码" value="" id="get">
                    <button class="btnCode" id='getsms'>发送验证码</button>
                </div>
                <div class="container">
                    <a href="javascript:" class="btn btn-primary" id="sub"><span id="submits">注册</span></a>

                    <div class="checkbox">
                        <input class="magic-checkbox" type="checkbox"  name="layout" id="c1" checked>
                        <label for="c1">我同意BD健身注册协议</label>
                    </div>
                </div>

            </form>
        </div>



</div>
<script type="text/javascript">
$(function(){
	
	var layer;
	that=layer;
	layui.use('layer', function(){
		  layer = layui.layer;
		});
	//监听 checkbox 事件
$('input:checkbox').click(function(event){
	if(this.checked){
		//alert('ss');
		//这里进行让其增加注册的样式高亮
		document.getElementById('sub').disabled=false;
	}else{
		 
		 layui.use('layer', function(){
			  layer = layui.layer;
			  layer.msg('请同意协议',{icon:5} ,function(index){
				  //do something
				   document.getElementById('sub').disabled='disabled'
				  layer.close(index);
				});     
			});
		  
	}
})
	$("#getsms").click(function(){
		
		 var mobile=$('#mobile').val();
		 //validatemobile(mobile);
		 var url="__up__/api/user/getTextValidateCode";
		 $.get(url,{telphone:mobile},function(data){
			 var obj=eval('(' + data +')');
			 var msg=obj.info;
			// console.log(obj);
			 if(obj.status==414){
				 layer.msg(msg, {
					  icon: 5,
					  time: 3000 //2秒关闭（如果不配置，默认是3秒）
					}, function(){
					  //do something
					  $('form #mobile').val('');
					});   
				
			 }else if(obj.status==200){
				 layer.msg(msg, {icon: 6}); 
			 }else{
				 layer.msg(msg, {icon: 5}); 
			 }
		 })
	   // var get_code=$("#getsms");
	    //sin(get_code);
	});

    $('#sub').click(function(){
    	var layer;
    	layui.use('layer', function(){
    		  layer = layui.layer;
    		});
    	var data=$("form").serialize();
    	//console.log(data);
    	var url="__up__/api/user/Cregister";
    	$.post(url,data,function(res){
    		var obj=eval('(' +res +')');
    		console.log(obj);
    		var status=obj.status;
    		var msg=decodeURI(obj.info);
    		if(status==-1){
    			 layer.msg(msg, {icon: 5}); 
    		}else if(status==200){
    			 layer.msg(msg, {
					  icon: 6,
					  time: 3000 //2秒关闭（如果不配置，默认是3秒）
					}, function(){
					  //do something
						 var url = obj.data;
		                  window.location.href=url; 
					});
    		}else if(status==401){
    			layer.msg(msg, {
					  icon: 5,
					  time: 3000 //2秒关闭（如果不配置，默认是3秒）
					}, function(){
					  //do something
						$('form #get').val(''); 
					});
    		}else{
    			layer.msg(msg,{icon:5});
    		}
    		
    	})
    })

// 获取验证码
    function getCode(){
        var mobile = $("#mobile").val();
        var i=validatemobile(mobile);  
        if(!i){
        	return false;
        }
        
        var get_code_url="__up__/api/user/getTextValidateCode";
        $.get(get_code_url,{telphone:mobile},function(data){
        	var obj=eval('('+ data +')');
        	console.log(obj);
        })
}
    //验证码倒计时
    var wait=60;//时间 
    function sin(o,p){
    	if(wait==0){
    		o.removeAttr('disabled');
    		o.text('获取验证码');
    	    p.html("如果您在1分钟内没有收到验证码，请检查您填写的手机号码是否正确或重新发送"); 
    	    wait = 60; 
    	}else{
    		 o.attr("disabled", true);//倒计时过程中禁止点击按钮 
    		 o.val("倒数" + wait + "秒");//改变按钮中value的值 
    		  wait--; 
    		 setTimeout(function(){
    			 sin(o,p);
    		 },1000);
    	}
    }
    function validatemobile(mobile)
    {
        if(mobile.length==0)
        {
          
           layer.msg('请输入手机号码', {icon: 6}); 
           $('form #mobile').focus();
           return false;
        }   
        if(mobile.length!=11)
        {
        	  
            layer.msg('请输入正确的手机格式', {icon: 6}); 
            $('form #mobile').focus();
            return false;
        }
         
    }
});
</script>

</body>
</html>